<style lang="postcss" scoped>
.home-container {
}
</style>
<template>
  <section class="home-container">
    <MasterPage title>
      <div slot="searchContent" class="search-content-slot">
        <Form :model="formItem" :label-width="80">
          <Row>
            <Col span="4">
              <FormItem label="招生年份">
                <DatePicker type="year" placeholder="请选择" v-model="formItem.year"></DatePicker>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem label="班级名称">
                <Input v-model="formItem.name"></Input>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem label="班级状态">
                <Select v-model="formItem.status">
                  <Option value="0">在校</Option>
                  <Option value="1">已毕业</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div slot="search">
        <Button style="margin-right:5px;" type="primary" icon="md-add" @click="new1()">添加</Button>
        <Button type="info" icon="md-cloud-upload" @click="generateModel =true">批量生成</Button>
        <!-- <Button type="error" icon="md-remove" @click="removeSelection()">删除</Button> -->
      </div>
      <div slot="btns">
        <Button type="info" icon="ios-search" @click="search()">查询</Button>
      </div>
      <div slot="paddingContent">
        <Table :columns="columns1" :data="data1" @on-selection-change="onSelectionChange"></Table>
        <Modal :title="title" v-model="modal1" class-name="vertical-center-modal" :closable="false">
          <Form ref="formValidate" :model="formData" :label-width="80" :rules="ruleValidate">
            <FormItem label="班级编号" prop="classNo">
              <Input v-model="formData.classNo" :disabled="editdisable"></Input>
            </FormItem>
            <FormItem label="班级名称" prop="name">
              <Input v-model="formData.name"></Input>
            </FormItem>
            <FormItem label="年份" prop="year">
              <DatePicker type="year" placeholder="请选择" v-model="formData.yearDate"></DatePicker>
              <!-- <Input v-model="formData.year" number></Input> -->
            </FormItem>
            <FormItem label="班级人数" prop="amount">
              <Input v-model="formData.amount" number></Input>
            </FormItem>
            <FormItem label="班级状态" prop="status">
              <Select v-model="formData.status">
                <Option :value="0">在校</Option>
                <Option :value="1">已毕业</Option>
              </Select>
            </FormItem>
          </Form>
          <div slot="footer">
            <Button type="text" size="large" @click="model1Closed()">取消</Button>
            <Button type="primary" size="large" @click="ok()">确定</Button>
          </div>
        </Modal>
        <Modal title="批量生成" v-model="generateModel" :closable="false">
          <Form :label-width="80">
            <FormItem label="数量">
              <Input v-model="generateData.num"></Input>
            </FormItem>
            <!-- <FormItem label="年级">
              <Input v-model="generateData.grade"></Input>
            </FormItem>-->
          </Form>
          <div slot="footer">
            <Button type="text" size="large" @click="generateModel=false">取消</Button>
            <Button type="primary" size="large" @click="generateOk()">确定</Button>
          </div>
        </Modal>
      </div>
      <div slot="pager">
        <!-- <Page :total="data1.length"/> -->
        <Page
          :total="pageTotal"
          :current="formItem.page"
          :page-size="formItem.size"
          show-total
          show-sizer
          placement="top"
          @on-change="handlePage"
          @on-page-size-change="handlePageSize"
        />
      </div>
    </MasterPage>
  </section>
</template>
<script>
import MasterPage from '@/components/Master'
import { pageList, add, update, generate, bindHeadTeacher, remove } from '@/services/class'
import { getHeaderList } from '@/services/teacher'
import moment from "moment";

export default {
  components: {
    MasterPage
  },
  async mounted() {
    console.log("class")
    await this.search()
  },
  watch: {
    formData: {
      handler(val, old) {
        console.log(val, old)
        if (val.yearDate) this.formData.year = moment(new Date(val.yearDate)).format("YYYY");
      },
      deep: true
    }
  },
  methods: {
    async generateOk() {
      console.log(this.generateData)
      try {
        await generate(this.generateData)
        this.$Message.info("操作成功");
        this.generateModel = false
        this.generateData = {}
        await this.search(this.formItem)
      } catch (err) {
        this.$Notice.error({ title: '操作失败', desc: err });
      }
    },
    async removeSelection() {
      //批量删除
      try {
        // await generate(this.generateData)
        this.$Message.info("操作成功");
        await this.search(this.formItem)
      } catch (err) {
        this.$Notice.error({ title: '操作失败', desc: err });
      }
    },
    onSelectionChange(selection) {
      this.selection = selection
    },
    edit(row) {
      this.formData = Object.assign({}, row)
      this.formData.yearDate = row.year + ""
      this.title = "编辑"
      this.modal1 = true
      this.editdisable = true
    },
    async remove1(row) {
      this.$Modal.confirm({
        title: "警告",
        content: "删除后无法恢复，是否确认？",
        onOk: async () => {
          try {
            await remove(row.id)
            this.$Message.info("操作成功");
            this.search()
          } catch (err) {
            this.$Notice.error({ title: '操作失败', desc: err });
          }
        }
      })
    },
    async new1() {
      this.formData.status = 0
      this.formData.amount = 50
      this.title = "新增"
      this.editdisable = false
      this.modal1 = true
    },
    async ok() {
      let valid = await this.$refs.formValidate.validate()
      if (!valid) return
      try {
        if (this.title == '新增') {
          //新增
          await add(this.formData)
        } else {
          //修改
          await update(this.formData)
        }
        this.$Message.info("操作成功");
        this.model1Closed()
        await this.search(this.formItem)
      } catch (err) {
        this.$Notice.error({ title: '操作失败', desc: err });
      }

    },
    model1Closed() {
      this.modal1 = false
      this.$refs.formValidate.resetFields()
      this.formData = {}
    },
    async search() {
      if (this.formItem.year) this.formItem.year = moment(new Date(this.formItem.year)).format("YYYY");
      let { count, list } = await pageList(this.formItem)
      this.data1 = list
      this.pageTotal = count
    },
    async handlePage(n) {
      this.formItem.page = n
      await this.search()
    },
    async handlePageSize(n) {
      this.formItem.size = n
      await this.search()
    },
    async setHead(row) {
      console.log(row)
      this.teacherList = await getHeaderList(row.id)
      if (this.teacherList.length == 0) {
        this.$Message.warning('该班级还未有教师，请去教师管理页面关联')
        return
      }
      let teacherId = null
      this.$Modal.info({
        title: "班主任",
        render: (h) => {
          return h('Select', {
            props: {
              value: row.teacherId
            },
            on: {
              input: (val) => {
                teacherId = val
              }
            }
          }, this.teacherList.map((item) => {
            return h('Option', {
              props: {
                value: item.id,
                label: item.name
              }
            })
          }))
        },
        onOk: async () => {
          try {
            // update(row)
            await bindHeadTeacher(teacherId, row.id)
            this.$Message.info("操作成功");
            await this.search(this.formItem)
          } catch (err) {
            this.$Notice.error({ title: '操作失败', desc: err });
          }
        }
      })
    }
  },
  data() {
    return {
      generateData: {},
      generateModel: false,
      teacherList: [],
      editdisable: false,
      selection: [],
      modal1: false,
      title: "",
      formData: {},
      pageTotal: 15,
      pageNum: 1,
      pageSize: 10,
      formItem: { page: 1, size: 10 },
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '班级编号',
          key: 'classNo'
        },
        {
          title: '班级名称',
          key: 'name'
        },
        {
          title: '招生年份',
          key: 'year'
        },
        {
          title: '人数',
          key: 'amount'
        },
        {
          title: '状态',
          key: 'status',
          render: (h, params) => {
            return h('p', params.row.status == 0 ? "在校" : "已毕业");
          }
        },
        {
          title: '班主任',
          key: 'teacherName'
        },
        {
          title: '操作',
          key: 'action',
          width: 220,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.row)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.remove1(params.row)
                  }
                }
              }, '删除'),
              h('Button', {
                props: {
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.setHead(params.row)
                  }
                }
              }, '班主任设置'),
              // h('Button', {
              //   props: {
              //     size: 'small'
              //   },
              //   on: {
              //     click: () => {
              //       this.setHead(params.row)
              //     }
              //   }
              // }, '学生配置')
            ]);
          }
        }
      ],
      ruleValidate: {
        classNo: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        year: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        amount: [
          { required: true, type: 'number', message: '必填', trigger: 'blur' }
        ],
        status: [
          { required: true, type: 'number', message: '必填', trigger: 'blur' }
        ],
      },
      data1: []
    }
  },
}
</script>
